<template>
	<view class="container">
		<topBar>新增收料</topBar>
		<view class="content">
			<view class="cart-imgs">
				<view class="left">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>车辆照片</text>
					</view>
					<view class="upload-area">
						<view class="upload-box" @click="uploadCartImg">
							<view class="upload">
								<image src="/static/img/common/camera.png" class="icon"></image>
								<text>拍照上传</text>
							</view>
							<view class="upload-tip">
								最多上传1张
							</view>
						</view>
						<view class="show-img" v-if="carFrom.carImages[0]">
							<view class="imgs">
								<view class="img-box" v-if="carFrom.carImages[0]">
									<image :src="carFrom.carImages[0]" mode="widthFix" class="img"></image>
									<up-icon class="icon" @click="delImg('carImages',0)" name="trash-fill"
										color="#EB4F51" size="30"></up-icon>
								</view>
							</view>

							<!-- <view class="img-title">
								物料照片01.jpg
							</view> -->
						</view>
					</view>
				</view>
				<view class="upload-example">
					<image src="/static/img/consumption/upload-example.png" class="img"></image>
					<view class="example-tip">
						上传示例
					</view>
				</view>
			</view>
			<view class="cart-info">
				<view class="cart-types">
					<Button2 class="btn" v-if="carOrther">{{carOrther.plateNoType}}</Button2>
					<!-- <Button2 class="btn">名录车</Button2> -->
				</view>
				<CarPlateInput :plateNumber="plateNumber" @PlateChange="handleNumChange" />
				<view class="cart-type">
					新能源
				</view>
			</view>
			<view class="cart-lines">
				<view class="line">
					<view class="title">
						运企名称
					</view>
					<view class="val">
						<input type="text" text-align="right" v-model="carFrom.transportCompanyName"
							placeholder="请输入" />
					</view>
				</view>
				<view class="line">
					<view class="left">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>驾驶员</text>
					</view>
					<view class="val">
						<input type="text" class="amount-input" placeholder="请输入" v-model="carFrom.driverName" />
					</view>
				</view>
				<view class="line" @click="showStartProjectPopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>起点名称</text>
					</view>
					<view class="val" :class="nowStartProject.projectName == undefined &&'no-check'">
						<text>{{nowStartProject?.projectName || '请选择' }}</text>
						<uni-icons type="right" size="28"
							:color="nowStartProject.projectName==undefined? '#989DA5' : '#0E1624'"></uni-icons>
					</view>
				</view>
				<view class="line" @click="showMaterialTypePopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>物料类型</text>
					</view>
					<view class="val" :class="nowMaterialType == null &&'no-check'">
						<text>{{nowMaterialType?.name || '请选择'}}</text>
						<uni-icons type="right" size="28"
							:color="nowMaterialType == null?'#989DA5':'#0E1624'"></uni-icons>
					</view>
				</view>


				<view class="cart-imgs line ">
					<view class="left">
						<view class="title">
							物料照片
						</view>
						<view class="upload-area">
							<view class="upload-box" @click="uploadMaterialImg('rockImages')">
								<view class="upload">
									<image src="/static/img/common/camera.png" class="icon"></image>
									<text>拍照上传</text>
								</view>
								<view class="upload-tip">
									最多上传6张
								</view>
							</view>
							<view class="show-img" v-if="carFrom.rockImages.length">
								<view class="imgs">
									<view class="img-box" v-if="carFrom.rockImages[0]">
										<image :src="carFrom.rockImages[0]" mode="widthFix" class="img"></image>
										<up-icon class="icon" @click="delImg('rockImages',0)" name="trash-fill"
											color="#EB4F51" size="30"></up-icon>
									</view>
									<view class="img-box" v-if="carFrom.rockImages[1]">
										<image :src="carFrom.rockImages[1]" mode="widthFix" class="img"></image>
										<up-icon class="icon" @click="delImg('rockImages',1)" name="trash-fill"
											color="#EB4F51" size="30"></up-icon>
									</view>
								</view>
								<view class="moreImg" @click="showMoreImg">
									点击查看更多
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 起点名称弹窗 -->
		<StartProjectPopup :addressList='addressList' v-if="isShowStartProjectPopup"
			@saveStartProject="saveStartProject" />

		<!-- 物料类型弹窗 -->
		<MaterialTypePopup :typeList='typeList' v-if="isShowMaterialTypePopup" @saveMaterialType="saveMaterialType" />
		<BottomBtn @click="saveReceiving">提交确认</BottomBtn>
		<!-- 预览图片 -->
		<PreviewImgs :img-list="carFrom.rockImages" v-if="isShowMoreImgs" @closePreview="closeMoreImgs" />
		<!-- 提示弹窗 -->
		<messageTip ref="myMessage" />

	</view>
</template>

<script setup lang="ts">
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button2 from '@/components/button2/button2.vue';
	import StartProjectPopup from '@/components/consumption/startProjectPopup/startProjectPopup.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue';
	import CarPlateInput from '@/components/carPlateInput/carPlateInput.vue'
	import PreviewImgs from '@/components/previewImgs/previewImgs.vue';
	import { ref, reactive } from 'vue';
	import * as consumptionApi from '@/api/consumption/consumption.js'
	import { addSL, queryProjectInfoList, muckTypeAll } from "@/api/consumption/goodsReceipt.js"
	import { getCartInfo } from "@/api/consumption/discharging.js"
	// 消息提示
	const myMessage = ref()
	// 上传车辆照片
	const uploadCartImg = () => {
		/* uni.navigateTo({
			url: '/pages/consumption/cartCamera/cartCamera'
		}) */
		uni.chooseImage({
			count: 1,
			success(res) {
				uni.showLoading({
					title: '正在识别中'
				})
				carFrom.carImages = []
				consumptionApi.uploadCartImg({ file: res.tempFilePaths }).then(res2 => {
					uni.hideLoading()
					// console.log('uuuuuuuuuuu', res2);
					let data = JSON.parse(res2.data).data
					carInfo.value = data
					carFrom.carImages = [data.ossUrl]
					if (data.IdentifyCarNumber) {
						plateNumber.value = [...data.IdentifyCarNumber]
						carFrom.carNumber = data.IdentifyCarNumber
						getCarInfoData(data.IdentifyCarNumber)
					} else {
						myMessage.value.open('error', "识别失败请手动输入车牌号")
					}

				})

			},

		})
	}
	// 车辆号码
	// const plateNumber = ref(['川', 'A', '0', '5', '5', '5', '5', 'D'])
	const plateNumber = ref(['', '', '', '', '', '', '', ''])
	// 修改车辆号码
	const handleNumChange = (val : string[]) => {
		plateNumber.value = val
		console.log("plateNumber", val)
		carFrom.carNumber = val.join('')
		if (val.length >= 7) {
			getCarInfoData(carFrom.carNumber)
		}
	}
	// 图片识别车辆信息
	const carInfo = ref(null)
	// 车辆其他信息
	const carOrther = ref(null)
	// 车辆信息
	const carFrom = reactive({
		carImages: [],
		rockImages: [],
		carNumber: "",
		driverName: "",
		startingPlace: "",
		terminusPlace: "",
		transportCompanyName: "",
		rockType: "",
		rockName: "",
		startingId: 1,
		startingType: "",
		startingAddress: "",
		startingLongitude: "",
		startingLatitude: "",
	});
	// 删除图片
	const delImg = (type : string, index : number) => {
		carFrom[type] = carFrom[type].filter((item, ind) => ind !== index)
	}
	// 当前起点名称
	const nowStartProject = ref({})
	// 是否显示起点项目弹窗
	const isShowStartProjectPopup = ref(false)
	// 起点名称
	const addressList = ref(null)
	// 物料类型
	const typeList = ref(null)
	// 打开选择起点项目弹窗
	const showStartProjectPopup = () => {
		isShowStartProjectPopup.value = true
	}
	// 保存起点项目
	const saveStartProject = (item) => {
		if (item) {
			nowStartProject.value = item
		}
		isShowStartProjectPopup.value = false
	}
	// 当前物料类型
	const nowMaterialType = ref(null)
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		isShowMaterialTypePopup.value = true
	}
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {
			nowMaterialType.value = item
			carFrom.rockType = item.id
			carFrom.rockName = item.name
		}
		isShowMaterialTypePopup.value = false
	}
	// 保存新增收料
	let isSave = true;
	const saveReceiving = () => {
		// uni.navigateBack()
		if (isSave) {
			isSave = false;
			let obj = {
				transportCompanyName: carFrom.transportCompanyName,
				carImages: carFrom.carImages,//车辆图片
				rockImages: carFrom.rockImages,//物料图片
				carNumber: plateNumber.value.join(''),//车牌号
				driverName: carFrom.driverName,//驾驶员
				rockType: carFrom.rockType,//物料类型
				rockName: carFrom.rockName,
				startingPlace: nowStartProject.value.projectName,
				startingId: nowStartProject.value.projectId,
				// 内转车:String 0--非内转 1--内转车
				internal: carOrther.value.internal,
				// 名录车:String 0--名录车 1--非名录车
				directory: carOrther.value.directory
			}
			if (!obj.carImages.length || obj.driverName == '' || obj.rockName == '' || obj.startingPlace == '' || obj.carNumber == '') {
				isSave = true;
				return myMessage.value.open('error', '请将信息填写完整')
			}
			addSL(obj).then(res => {
				isSave = true;
				console.log("res.data", res.data)
				if (res.data.code == 0) {
					myMessage.value.open('success', "添加成功")
					setTimeout(() => {
						// uni.navigateBack()
						uni.navigateBack({
							delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
							success: function () {
								uni.$emit('updata', { msg: "页面刷新" })
							},
							fail: function (err) {
								console.error('页面返回失败：', err);
							}
						});
					}, 800)
				} else {
					myMessage.value.open('error', res.data.msg)
				}
				// console.log("返回结果",res)
			})
		}
	}
	// 获取下拉列表 queryProjectInfoList

	const getNextList = () => {
		queryProjectInfoList().then(res => {
			if (res.data.code == 0) {
				console.log("起点名称", res.data)
				addressList.value = res.data.data
			} else {
				console.log("失败")
			}
		})
	}
	getNextList()
	// 获取物料类型 muckTypeAll
	const getMuckTypeAll = () => {
		muckTypeAll().then(res => {

			if (res.data.code == 0) {
				// console.log("dddddd", res.data.data)
				// addressList.value=res.data.data
				typeList.value = res.data.data
			} else {
				console.log("失败")
			}
		})
	}
	getMuckTypeAll()
	// 获取车辆信息
	const getCarInfoData = (carNum : string) => {
		let obj = {
			cartId: carNum
		}
		getCartInfo(obj).then(res => {
			// console.log("返回下来列表22", res)
			if (res.data.code == 0) {
				// addressList.value=res.data.data
				// typeList.value=res.data.data
				carOrther.value = res.data.data
				carFrom.transportCompanyName = res.data.data.vehicleInfo?.companyName
			} else {

				myMessage.value.open('error', res.data.msg)
			}
		})
	}
	// 删除
	const clearHandle = () => {
		carFrom.transportCompanyName = ''
		carFrom.carImages = []
		carFrom.rockImages = []
		carFrom.carNumber = ''
		plateNumber.value = ['', '', '', '', '', '', '', '']
		carOrther.value = null
		carInfo.value = null

	}

	// 上传物料照片
	const uploadMaterialImg = (key) => {
		uni.chooseImage({
			count: 6,
			success: async (res) => {
				uni.showLoading({
					title: '正在上传中'
				})
				for (const file of res.tempFilePaths) {
					let res2 = await consumptionApi.uploadMaterialImg({ file })
					if (res2.data) {
						let data = JSON.parse(res2.data)
						carFrom[key].push(data.data.ossUrl)
					}
				}
				uni.hideLoading()

			}
		})
	}
	// 是否显示更多图片
	const isShowMoreImgs = ref(false)
	// 查看更多图片
	const showMoreImg = () => {
		isShowMoreImgs.value = true
	}
	// 关闭图片弹窗
	const closeMoreImgs = () => {
		isShowMoreImgs.value = false
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx;
		width: 686rpx;
		// height: 1140rpx;
		padding-bottom: 42rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;



		/* .cart-imgs {
			display: flex;
			border-bottom: 2rpx solid rgba(156, 159, 163, 0.1);

			.left {
				flex: 1;
				padding: 32rpx 0rpx 20rpx 24rpx;

				.title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.upload-area {
					display: flex;
					font-size: 20rpx;
					color: $info-color;
					text-align: center;

					.upload-box {
						margin-right: 16rpx;

						.upload {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 10rpx;
							width: 135rpx;
							height: 136rpx;
							font-size: 24rpx;
							color: $primary-color;
							border: 2rpx dashed #9C9FA3;
							border-radius: 8rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}
						}


					}
				}

				.show-img {
					position: relative;

					.img {
						margin-bottom: 10rpx;
						width: 208rpx;
						height: 136rpx;
					}

					.delect {
						position: absolute;
						top: -5rpx;
						right: 0;
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.upload-example {
				width: 200rpx;
				padding: 70rpx 20rpx 16rpx;
				box-shadow: -4rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				box-sizing: border-box;

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.example-tip {
					// margin-top: 10rpx;
					font-size: 20rpx;
					color: $primary-color;
					text-align: center;

				}
			}
		} */
		.cart-imgs {
			display: flex;
			border-bottom: 2rpx solid rgba(156, 159, 163, 0.1);

			.left {
				flex: 1;
				padding: 32rpx 0rpx 20rpx 24rpx;

				.title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.upload-area {
					display: flex;
					font-size: 20rpx;
					color: $info-color;
					text-align: center;

					.upload-box {
						margin-right: 16rpx;

						.upload {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-bottom: 10rpx;
							width: 135rpx;
							height: 136rpx;
							font-size: 24rpx;
							color: $primary-color;
							border: 2rpx dashed #9C9FA3;
							border-radius: 8rpx;

							.icon {
								width: 40rpx;
								height: 40rpx;
							}
						}


					}
				}

				.show-img {
					position: relative;

					.imgs {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.img-box {
							position: relative;
							margin-right: 20rpx;

							.icon {
								position: absolute;
								right: -20rpx;
								top: -20rpx;
							}

							.img {
								width: 208rpx;
								height: 150rpx;
							}
						}
					}

					.delect {
						position: absolute;
						top: -5rpx;
						right: 0;
						width: 50rpx;
						height: 50rpx;
					}

					.moreImg {
						text-align: left;
						font-size: 30rpx;
						color: $primary-color;
					}
				}
			}

			.upload-example {
				width: 200rpx;
				padding: 70rpx 20rpx 16rpx;
				box-shadow: -4rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				box-sizing: border-box;

				.img {
					width: 160rpx;
					height: 160rpx;
				}

				.example-tip {
					// margin-top: 10rpx;
					font-size: 20rpx;
					color: $primary-color;
					text-align: center;

				}
			}
		}

		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				margin-bottom: 18rpx;

				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;



				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// font-weight: bold;

					.amount-input {
						margin: 0rpx 20rpx;
						width: 100rpx;
						font-size: 28rpx;
					}

					&.no-check {
						color: #989DA5;
					}
				}

			}
		}

	}

	.cart-code {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 16rpx 0rpx;
		font-size: 40rpx;
		font-weight: bold;

		.code-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 68rpx;
			height: 80rpx;
			// line-height: 80rpx;
			text-align: center;
			background: #EFF6FE;
			border-radius: 8rpx;
			overflow: hidden;


		}
	}

	.upload-area {
		display: flex;
		font-size: 20rpx;
		color: $info-color;
		text-align: center;

		.upload-box {
			margin-right: 16rpx;

			.upload {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
				width: 135rpx;
				height: 136rpx;
				font-size: 24rpx;
				color: $primary-color;
				border: 2rpx dashed #9C9FA3;
				border-radius: 8rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}


		}
	}
</style>